<template>
  <div class="container flex-center-center">
    <div class="container-left">
      <img class="logo" v-if="isCardlumi" src="../../assets/cardlumi.png" alt="">
      <img v-else src="../../assets/login/logo.png" class="logo" alt="">
    </div>
    <div class="container-login">
      <img class="logo2" v-if="isCardlumi" src="../../assets/cardlumi.png" alt="">
      <img class="logo2" v-else src="../../assets/login/logo.png" alt="">

      <div class="title">
        Platform
      </div>
      <el-form class="form">
        <div class="nameTitle">
          账号
        </div>
        <el-input size="large" v-model="form.username" placeholder="请输入账号名称" type="text" maxlength="50">
        </el-input>
        <div :style="{ opacity: nameErr ? '1' : '0' }" class="tips">
          <img class="err" src="../../assets/login/err.png" alt=""> 请输入正确的账号
        </div>
        <div style="margin-top:4px;" class="nameTitle">
          密码
        </div>
        <el-input size="large" ref="password" v-model="form.password" :type="passwordType"
          :placeholder="$t('message.system.password')" name="password" maxlength="50">
        </el-input>
        <div :style="{ opacity: passwordErr ? '1' : '0' }" class="tips">
          <img class="err" src="../../assets/login/err.png" alt=""> 密码错误
        </div>
      </el-form>
      <div @click="submit" class="loginBt flex-c-c hover">
        登录
      </div>
    </div>
  </div>
</template>

<script setup>
  import { systemTitle, systemSubTitle } from '@/config'
  import { defineComponent, ref, reactive } from 'vue'
  import { useStore } from 'vuex'
  import { useRouter, useRoute } from 'vue-router'
  import { getAuthRoutes } from '@/router/permission'
  import { ElMessage } from 'element-plus'

  const isCardlumi = ref(import.meta.env.MODE == 'cardlumi')
  const store = useStore()
  const router = useRouter()
  const route = useRoute()
  const form = reactive({
    username: '',
    password: '',
    loading: false
  })
  const passwordType = ref('password')
  const passwordTypeChange = () => {
    passwordType.value === '' ? passwordType.value = 'password' : passwordType.value = ''
  }
  const nameErr = ref(false)
  const passwordErr = ref(false)
  const submit = () => {
    let params = {
      username: form.username,
      password: form.password
    }

    store.dispatch('user/login', params)
      .then(async () => {
        ElMessage.success({
          message: '登录成功',
          type: 'success',
          showClose: true,
          duration: 1000
        })
        location.reload()
      }).finally(() => {
        form.loading = false
      })
  }


</script>

<style lang="scss" scoped>
  .container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-size: cover;
    cursor: pointer;
    user-select: none;
    background: #FAFAFB;
    display: flex;

    &-left {
      width: 9.57rem;
      height: 100%;
      background: #4180F7;
      display: flex;

      .logo {
        width: auto;
        height: 1rem;
        margin-left: 0.88rem;
        margin-top: 0.68rem;
      }
    }

    &-right {
      width: 9.63rem;
      height: 100%;
      background: #fff;
    }

    &-login {
      position: absolute;
      top: 1.69rem;
      left: 6.91rem;
      width: 5.39rem;
      height: 7.41rem;
      border-radius: 0.4rem;
      background: #FFF;
      box-shadow: 0px 0.04rem 0.35rem 0px rgba(0, 0, 0, 0.08);

      .logo2 {
        width: 0.92rem;
        height: 0.92rem;
        margin-top: 0.4rem;
        margin-bottom: 0.42rem;
      }

      .title {
        color: #000;
        font-family: "PingFang SC";
        font-size: 0.42rem;
        font-weight: 500;
        height: 0.59rem;
        line-height: 0.59rem;
      }

      .form {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding: 0.43rem 0.8rem 0.43rem 1.01rem;
        box-sizing: border-box;

        .nameTitle {
          color: #7481A7;
          font-family: "PingFang SC";
          font-size: 0.16rem;
          font-weight: 400;
          height: 0.22rem;
          line-height: 0.22rem;
          margin-bottom: 0.14rem;
        }

        .tips {
          height: 0.31rem;
          line-height: 0.31rem;
          color: #732520;
          font-family: "PingFang SC";
          font-size: 0.12rem;
          font-weight: 500;

          img {
            width: 0.12rem;
            height: 0.12rem;
            margin-right: 0.08rem;
          }

        }


      }

      .loginBt {
        z-index: 999;
        margin: 0 auto;
        color: #FFF;
        font-family: "PingFang SC";
        font-size: 0.18rem;
        font-weight: 500;
        width: 4.04rem;
        height: 0.54rem;
        border-radius: 0.27rem;
        background: #4180F7;
        box-shadow: 0px 0.04rem 0.19rem 0px rgba(65, 128, 247, 0.30);
      }
    }
  }
</style>